<template>
  <div class="approve-my-list">
    <el-card>
      <template #header>
        <div class="card-header">
          <h3>我申请的审批</h3>
        </div>
      </template>

      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="待审批" name="1"></el-tab-pane>
        <el-tab-pane label="审批通过" name="2"></el-tab-pane>
        <el-tab-pane label="审批拒绝" name="3"></el-tab-pane>
      </el-tabs>

      <Table
        :data="approvalList"
        border
        v-loading="loading"
        :height="tableHeight"
        :columns="tableColumns"
        :show-operation="true"
        operation-width="90"
      >
        <template #check_status="{ row }">
          <span :class="`check-status-color-${row.check_status}`">
            『{{ row.check_status_str }}』
          </span>
        </template>

        <template #operation="{ row }">
          <el-button-group>
            <el-button size="small" type="primary" @click="viewDetail(row)">详情</el-button>
            <el-button
              v-if="row.check_status == 0 || row.check_status == 4"
              size="small"
              @click="editApproval(row)"
            >
              编辑
            </el-button>
          </el-button-group>
        </template>
      </Table>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import request from '../../utils/request'
  import { useRouter } from 'vue-router'
  import { BaseTable as Table } from '../../components'
  import type { TableColumn } from '../../types/common'

  // 数据相关
  const approvalList = ref([])
  const loading = ref(false)
  const activeTab = ref('0')
  const currentPage = ref(1)
  const pageSize = ref(20)
  const total = ref(0)
  const tableHeight = ref('full-92')

  const router = useRouter()

  // 表格列配置
  const tableColumns: TableColumn[] = [
    { prop: 'types_name', label: '审批类型', width: 100, align: 'center' },
    { prop: 'check_status', label: '审核状态', width: 110, align: 'center', slot: 'check_status' },
    { prop: 'admin_name', label: '申请人', width: 90, align: 'center' },
    { prop: 'create_time', label: '申请时间', width: 150, align: 'center' },
    { prop: 'department', label: '所属部门', width: 120, align: 'center' },
    { prop: 'check_users', label: '当前审批人' },
    { prop: 'check_copy_users', label: '抄送人员', width: 150 },
  ]

  // 获取我申请的审批列表
  const getMyApprovalList = async () => {
    try {
      loading.value = true
      const response = await request.get('/home/approve/mylist', {
        params: {
          status: activeTab.value,
          page: currentPage.value,
          limit: pageSize.value,
        },
      })

      if (response.data?.code === 0) {
        approvalList.value = response.data?.data?.list
        total.value = response.data?.data?.total
      } else {
        ElMessage.error(response.data?.msg || '获取审批列表失败')
      }
    } catch (error) {
      ElMessage.error('获取审批列表失败')
    } finally {
      loading.value = false
    }
  }

  // 查看详情
  const viewDetail = (row: any) => {
    router.push(row.view_url + '?id=' + row.id)
  }

  // 编辑审批
  const editApproval = (row: any) => {
    router.push(row.add_url + '?id=' + row.id)
  }

  // 处理标签页切换
  const handleTabChange = (name: string) => {
    activeTab.value = name
    currentPage.value = 1
    getMyApprovalList()
  }

  // 处理分页大小变化
  const handleSizeChange = (val: number) => {
    pageSize.value = val
    currentPage.value = 1
    getMyApprovalList()
  }

  // 处理当前页变化
  const handleCurrentChange = (val: number) => {
    currentPage.value = val
    getMyApprovalList()
  }

  // 初始化
  onMounted(() => {
    getMyApprovalList()
  })
</script>

<style scoped>
  .approve-my-list {
    padding: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .check-status-color-0::before,
  .check-status-color-4::before {
    content: '待审批';
    color: #409eff;
  }

  .check-status-color-1::before {
    content: '审批通过';
    color: #67c23a;
  }

  .check-status-color-2::before {
    content: '审批拒绝';
    color: #f56c6c;
  }

  .check-status-color-3::before {
    content: '已撤回';
    color: #909399;
  }
</style>
